<!DOCTYPE html>
<html lang="zh">
<head>
    <title>Project Rain</title>
    <style>
        * {
            box-sizing: border-box;
            font-family: Arial, Helvetica, sans-serif;
        }

        body {
            background-color: #f1f1f1;
        }

        h1 {
            font-size: 40px;
        }

        .container {
            padding: 20px;
            margin: 20px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            overflow-x: auto;
        }

        .list_controller {
            background-color: #4CAF50;
            color: #fff;
            border: none;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color 0.3s;
        }

        .list_controller:hover {
            background-color: #3e8e41;
        }

        .list_controller:active {
            background-color: #1e461e;
        }

        .list_controller:disabled {
            background-color: #a0a0a0;
            cursor: not-allowed;
        }

        .list {
            list-style-type: none;
            padding: 0;
        }

        .raspi {
            font-weight: bold;
            color: #4CAF50;
        }

        .list li {
            padding: 10px;
            margin-bottom: 5px;
            background-color: #f2f2f2;
            border-radius: 5px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        }

        @keyframes backgroundEffect {
            0% {
                background-color: #ECECEC;
            }
            25% {
                background-color: #F8F8F8;
            }
            50% {
                background-color: #ECECEC;
            }
            75% {
                background-color: #F8F8F8;
            }
            100% {
                background-color: #ECECEC;
            }
        }

        @media screen and (max-width: 600px) {
            .container {
                width: 100%;
            }
        }

        .timeStamp {
            color: #2cf1b4;
        }

        .clientID {
            color: #35bcf1
        }

        .clientData {
            color: #000000;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>Project Rain for RaspberryPi 4B Clients Data Monitor</h1>
    <div>
        <!-- 开启定时器-->
        <button type="button" class="list_controller" id="enableAutoUpdate">
            enableAutoUpdate
        </button>
        <!--关闭定时器-->
        <button type="button" class="list_controller" id="disableAutoUpdate">
            disableAutoUpdate
        </button>
        <!--手动取一次全部数据-->
        <button type="button" class="list_controller" id="updateOnce">
            fetchOnce
        </button>
        <!--获取一次紧急数据-->
        <button type="button" class="list_controller" id="updateEmerge">
            fetchEmerge
        </button>
        <!--清屏-->
        <button type="button" class="list_controller" id="clearScreen">
            ClearScreen
        </button>
        <button type="button" class="list_controller" id="list_status" disabled>
            currentStatus: default
        </button>
    </div>

    <ul class="list" id="list">
        <li>
            <span class="raspi">Initial List</span>
        </li>
    </ul>
</div>
<script>

    class ClientData {
        timeStamp;
        clientID;
        cpuTemp;
        distance;
        envTemp;
        envHumi;
    }

    /**
     * @param {ClientData[]} data - 客户端数据对象数组 */
    function updateList(data /**  ClientData[] */) {
        const list = document.getElementById("list");
        // Remove any excess list items
        while (list.children.length > data.length + 1) {
            list.removeChild(list.lastChild);
        }

        // Update existing list items and add new ones
        for (let i = 0; i < data.length; i++) {
            let item = list.children[i + 1];
            if (!item) {
                item = document.createElement("li");
                list.appendChild(item);
            }
            item.innerHTML = "<span class=\"raspi\">[ <span class=\"timeStamp\">"
                + data[i].timeStamp + "</span> ] ID: <span class=\"clientID\">"
                + data[i].clientID + "</span>, cpuTemp: <span class=\"clientData\">"
                + data[i].cpuTemp + "C</span>, distance: <span class=\"clientData\">"
                + data[i].distance + "cm</span>, envTemp: <span class=\"clientData\">"
                + data[i].envTemp + "C</span>, envHumi: <span class=\"clientData\">"
                + data[i].envHumi + "%</span></span>";
        }
        if (list.children.length <= 1)
            list.children[0].innerHTML = "<span class=\"raspi\">There Is No Client Connection</span>";
        else list.children[0].innerHTML = "<span class=\"raspi\">Client Connection List [Current: <span style=\"color: black\">" + (list.children.length - 1) + "</span>]:</span>";
    }

    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (this.readyState === 4 && this.status === 200) {
            const data = JSON.parse(this.responseText);
            // if (Array.isArray(data) && data.every(item => item instanceof ClientData))
            updateList(data);
            // else console.log("Unknown JSON formation: " + this.responseText);
        }
    };

    let auto_update_date = setInterval(queryData, 10000);

    let status = document.getElementById("list_status");
    let enableAuto = document.getElementById("enableAutoUpdate");
    let disableAuto = document.getElementById("disableAutoUpdate");
    let updateOnce = document.getElementById("updateOnce");
    let updateEmerge = document.getElementById("updateEmerge");
    let clearList = document.getElementById("clearScreen");

    enableAuto.addEventListener("click", enableAutoUpdate);
    disableAuto.addEventListener("click", disableAutoUpdate);
    updateOnce.addEventListener("click", fetchOnce);
    updateEmerge.addEventListener("click", fetchEmerge);
    clearList.addEventListener("click", clearScreen);

    function enableAutoUpdate() {
        status.innerHTML = "currentStatus: autoUpdate";
        enableAuto.setAttribute("disabled", true);
        disableAuto.removeAttribute("disabled");
        auto_update_date = setInterval(queryData, 10000);
    }

    function disableAutoUpdate() {
        status.innerHTML = "currentStatus: autoDisabled";
        enableAuto.removeAttribute("disabled");
        disableAuto.setAttribute("disabled", true);
        clearInterval(auto_update_date);
    }

    function fetchOnce() {
        disableAutoUpdate();
        status.innerHTML = "currentStatus: manualUpdate";
        queryData();
    }

    function fetchEmerge() {
        disableAutoUpdate();
        status.innerHTML = "currentStatus: manualUpdate (Emerge only)";
        queryEmerge();
    }

    function clearScreen() {
        status.innerHTML = "currentStatus: disabled";
        updateList([]);
    }

    function queryData() {
        xhr.open("GET", "/fetch_all", true);
        xhr.send();
    }

    function queryEmerge() {
        xhr.open("GET", "/fetch_emerge", true);
        xhr.send();
    }

    disableAutoUpdate();


</script>


</body>
</html>

